<template>
    <div>

        <el-form :inline="true">
            <el-form-item label="销售订单编码">
                <el-input v-model="orderNo" placeholder="请输入销售订单编码"></el-input>
            </el-form-item>

            <el-form-item label="订单名称">
                <el-input v-model="orderName" placeholder="请输入订单名称"></el-input>
            </el-form-item>
            <el-form-item label="客户编码">
                <el-input v-model="customercode" placeholder="请输入客户编码"></el-input>
            </el-form-item>
            <el-form-item label="客户名称">
                <el-input v-model="customername" placeholder="请输入客户名称"></el-input>
            </el-form-item>

            <el-form-item label="产品编码">
                <el-input v-model="productcode" placeholder="请输入产品编码"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="productname" placeholder="请输入产品名称"></el-input>
            </el-form-item>
            <el-form-item label="客户产品名称">
                <el-input v-model="customerproductname" placeholder="请输入客户产品名称"></el-input>
            </el-form-item>


            <el-form-item label="材质">
                <el-input v-model="followUp" placeholder="请输入跟单"></el-input>
            </el-form-item>

            <el-form-item label="颜色">
                <el-select v-model="color">
                    <el-option label="红色" value="red"></el-option>
                    <el-option label="蓝色" value="blue"></el-option>
                    <el-option label="绿色" value="green"></el-option>
                </el-select>

            </el-form-item>


            <el-form-item label="交货日期">
                <el-date-picker v-model="deliveryDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-button type="primary" @click="search" style="margin-bottom: 20px;"><el-icon style="margin-right: 10px;">
                    <Search />
                </el-icon>搜索</el-button>
        </el-form>

        <!-- 按钮组 color="#3A9DFF"-->
        <el-row>
            <el-col :span="10">
                <div class="button-group">
                    <el-button plain type="primary" class="button-item" v-prem="'manpower:basicData:rank:insert'"
                        @click="insert">
                        <el-icon style="vertical-align: middle">
                            <SvgIcon name="新增"></SvgIcon>
                        </el-icon>
                        <span style="vertical-align: middle">新增</span>
                    </el-button>
                    <el-button plain type="success" class="button-item" v-prem="'manpower:basicData:rank:insert'"
                        @click="update">
                        <el-icon style="vertical-align: middle">
                            <SvgIcon name="修改" color="#93E2A3"></SvgIcon>
                        </el-icon>
                        <span style="vertical-align: middle">修改</span>
                    </el-button>
                    <el-button plain type="danger" disabled>
                        <el-icon style="vertical-align: middle">
                            <SvgIcon name="删除" color="#FF9292"></SvgIcon>
                        </el-icon>
                        <span style="vertical-align: middle">删除</span>
                    </el-button>
                    <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>

                </div>

            </el-col>

            <el-col :span="14">
                <div class="button-group" :style="{ 'text-align': 'right' }">
                    <el-button :icon="Search" circle />
                    <el-button :icon="Refresh" circle />
                </div>
            </el-col>

        </el-row>

        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="detailNo" label="明细编码" width="120">
                <template #default="scope">
                    <el-button data="cxa" type="text" @click="insert">
                        {{ scope.row.detailNo }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="订单编码" width="120"></el-table-column>
            <el-table-column prop="customercode" label="客户编码" width="120"></el-table-column>
            <el-table-column prop="orderDate" label="订货日期" width="120"></el-table-column>
            <el-table-column prop="orderStatus" label="状态" width="120"></el-table-column>
            <el-table-column prop="customername" label="客户名称" width="120"></el-table-column>
            <el-table-column prop="productcode" label="产品编码" width="120"></el-table-column>
            <el-table-column prop="productname" label="产品名称" width="120"></el-table-column>
            <el-table-column prop="Productspecs" label="产品规格" width="120"></el-table-column>
            <el-table-column prop="material" label="材质" width="120"></el-table-column>
            <el-table-column prop="colorcode" label="色号" width="120"></el-table-column>
            <el-table-column prop="color" label="颜色" width="120"></el-table-column>
            <el-table-column prop="unit" label="单位" width="120"></el-table-column>
            <el-table-column prop="deliveryDate" label="交货日期" width="120"></el-table-column>
            <el-table-column prop="customerproductname" label="客户产品名称" width="120"></el-table-column>
            <el-table-column prop="quantity" label="订货数量" width="120"></el-table-column>
            <el-table-column prop="unitprice" label="库存数量" width="120"></el-table-column>
            <el-table-column prop="deliveredquantity" label="已出货数" width="120"></el-table-column>
            <el-table-column prop="Returnedquantity" label="已退货数" width="120"></el-table-column>
            <el-table-column prop="balancequantity" label="欠数" width="120"></el-table-column>
            <el-table-column prop="manualcancellation" label="手工消数" width="120"></el-table-column>
            <el-table-column prop="remark" label="备注" width="120"></el-table-column>
            <el-table-column prop="id" label="id" width="120"></el-table-column>
            <el-table-column prop="Creator" label="创建者" width="120"></el-table-column>
            <el-table-column prop="CreationTime" label="创建时间" width="120"></el-table-column>
            <el-table-column prop="Modifier" label="修改者" width="120"></el-table-column>

            <el-table-column label="操作" width="200px">
                <template #default="scope">
                    <el-button :row="scope.row" type="primary"
                        v-perm:management:salesorder:update="update">修改</el-button>
                    <el-button type="danger" size="mini" :row="scope.row"
                        v-perm:management:salesorder:remove="remove">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" width="1200px">
            <el-form :model="data" ref="orderForm" label-width="120px" style="max-width: 1500px; margin: auto;">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="产品编号">
                            <el-input v-model="data.orderNo" style="max-width: 600px" placeholder="请输入产品编号"
                                class="input-with-select">
                                <template #append>
                                    <el-button plain @click="dialogTableVisible = true" :icon="Search">
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="产品名称">
                            <el-input v-model="data.orderName" placeholder="请输入产品名称"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="产品规格">
                            <el-input v-model="data.customercode" placeholder="请输入产品规格"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="订货编码">
                            <el-input v-model="data.customername" placeholder="请输入订货编码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订货日期">
                            <el-date-picker v-model="data.orderDate" type="date" placeholder="选择订货日期"></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="交货日期">
                            <el-date-picker v-model="data.deliveryDate" type="date"
                                placeholder="选择交货日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="材质">
                            <el-input v-model="data.material" placeholder="请输入材质"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="色号">
                            <el-input v-model="data.colorCode" placeholder="请输入色号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="颜色">
                            <el-select v-model="data.producttype" placeholder="请选择颜色">
                                <el-option label="红色" value="红色"></el-option>
                                <el-option label="蓝色" value="蓝色"></el-option>
                                <el-option label="绿色" value="绿色"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="订货数量">
                            <el-input v-model="data.orderQuantity" placeholder="请输入订货数量"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单位">
                            <el-select v-model="data.settleType" placeholder="请选择单位">
                                <el-option label="个" value="个"></el-option>
                                <el-option label="套" value="套"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="主单编码">
                            <el-input v-model="data.mainOrderNo" placeholder="请输入主单编码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="客供名称">
                            <el-input v-model="data.supplierName" placeholder="请输入客供名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="库存数量">
                            <el-input v-model="data.stockQuantity" placeholder="请输入库存数量"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="已出货数">
                            <el-input v-model="data.shippedQuantity" placeholder="请输入已出货数"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="已退货数">
                            <el-input v-model="data.returnedQuantity" placeholder="请输入已退货数"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手工消数">
                            <el-input v-model="data.manualAdjustment" placeholder="请输入手工消数"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="工单编码">
                            <el-input v-model="data.workOrderNo" placeholder="请输入工单编码"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="20">
                        <el-form-item label="备注">
                            <el-input v-model="data.remark" type="textarea" :rows="3" placeholder="请输入备注"
                                style="width: 100%;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" style="text-align: right;">
                <el-button type="primary" @click="submitOrder">确 定</el-button>
                <el-button @click="generateWorkOrder" style="background-color: aquamarine;">生成工单</el-button>
                <el-button @click="visible = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog v-model="dialogTableVisible" title="产品选择" width="1300" center>
            <el-table :data="gridData">
                <el-table-column property="date" label="产品编码" width="200" />
                <el-table-column property="name" label="产品名称" width="200" />
                <el-table-column property="address" label="规格型号" />
                <el-table-column property="type" label="单位" width="200" />
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button type="primary" @click="handleSelect(scope.row)">编辑</el-button>
                        <el-button type="primary" @click="handleSelect(scope.row)">删除</el-button>

                    </template>
                </el-table-column>

            </el-table>

            <el-button type="primary" @click="handleSelect(scope.row)"
                style="margin-top: 20px; margin-bottom: 20px;">新增</el-button>

            <div slot="footer" style="text-align: center;">
                <el-button type="primary" @click="submitOrder">确 定</el-button>
                <el-button @click="visible = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogTableVisible" title="选择产品编号" @click="insert">  
      <div>  
        <!-- 对话框内的内容 -->  
        <p>这里是产品选择的内容</p>  
      </div>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="closeDialog">取 消</el-button>  
        <el-button type="primary" @click="confirmSelection">确 定</el-button>  
      </span>  
    </el-dialog>

    </div>
</template>

<script setup>

import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
let data = ref({

})
let visible = ref(false)

let title = ref('')
const insert = () => {
    // 清空表单数据  
    data.value = {
        orderNo: '',
        customercode: '',
        customername: '',
        productcode: '',
        productname: '',
        quantity: '',
        deliveryDate: ''
    };
    visible.value = true;
    title.value = '添加订单';
};
const update = (row) => {
    visible.value = true;
    title.value = '修改订单';
    data.value = { ...row };
};
const close = () => {
    visible.value = false;
};

const submitOrder = () => {
    // 提交订单逻辑，这里可以处理数据的保存  
    console.log('提交的订单数据:', data.value);
    visible.value = false;
};

const dialogTableVisible = ref(false)


const gridData = [
    {
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
        type: '家用电器'
    },
    {
        date: '2016-05-04',
        name: 'Tom Brown',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
        type: '手机'
    },
    {
        date: '2016-05-01',
        name: 'Jack Lee',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
        type: '数码产品'
    },
    {
        date: '2016-05-03',
        name: 'David Kim',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
        type: '家居用品'
    },
    {
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
        type: '家用电器'
    },
    {
        date: '2016-05-04',
        name: 'Tom Brown',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
        type: '手机'
    },
    {
        date: '2016-05-01',
        name: 'Jack Lee',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
        type: '数码产品'
    },
    {
        date: '2016-05-03',
        name: 'David Kim',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
        type: '家居用品'
    }
]

// 初始化状态（设置默认值）
const orderNo = ref('')
const orderName = ref('')
const customercode = ref('')
const customername = ref('')
const productcode = ref('')
const productname = ref('')
const customerproductname = ref('')
const followUp = ref('')
const color = ref('')
const deliveryDate = ref('')









// 示例订单数据
let salesorder = ref([
    {
        detailNo: "123456",
        orderNo: "123456",
        customercode: "123456",
        orderDate: "2021-01-01",
        orderStatus: "已完成",
        customername: "sb",
        productcode: "123456",
        productname: "小妹硅胶",
        Productspecs: "无",
        material: "硅胶",
        colorcode: "123456",
        color: "红色",
        unit: "个",
        deliveryDate: "2021-01-01",
        customerproductname: "小妹硅胶",
        quantity: "100",
        unitprice: "100",
        deliveredquantity: "100",
        Returnedquantity: "0",
        balancequantity: "0",
        manualcancellation: "0",
        remark: "无",
        id: "123456",
        Creator: "admin",
        CreationTime: "2021-01-01",
        Modifier: "admin"

    },
    {

        detailNo: "333",
        orderNo: "333",
        customercode: "333",
        orderDate: "2021-01-01",
        orderStatus: "已完成",
        customername: "vw五菱",
        productcode: "333",
        productname: "棋盘",
        Productspecs: "无",
        material: "棋盘",
        colorcode: "333",
        color: "黑色",
        unit: "个",
        deliveryDate: "2021-01-01",
        customerproductname: "棋盘",
        quantity: "10",
        unitprice: "10",
        deliveredquantity: "10",
        Returnedquantity: "0",
        balancequantity: "0",
        manualcancellation: "0",
        remark: "无",
        id: "333",
        Creator: "admin",
        CreationTime: "2021-01-01",
        Modifier: "admin"
    }
]);

let selectedRows = ref([]);

const handleSelectionChange = (val) => {
    selectedRows.value = val;
};

const bulkDelete = () => {
    // 批量删除逻辑，这里可以根据 selectedRows 进行处理
    console.log('要删除的订单:', selectedRows.value);
};
</script>

<style scoped>
/* 样式部分，可以根据需求添加 */
.el-select {
    width: 150px;
}

.el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}
</style>
